<template>
	<div class="app-container">
		<el-card class="box-card">
			<h3>主图管理</h3>
			<el-form ref="quan" :rules="rules" :model="quan" label-width="150px">
				<el-form-item label="链接" prop="url">
					<el-input v-model="quan.url" />
				</el-form-item>
				<el-form-item label="图片">
					<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
					<el-upload ref='upload'  :action="actions" list-type="picture-card" :on-success="handOnSuccess"
					 :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList">
						<!--  :on-preview="handlePictureCardPreview" -->
						<i class="el-icon-plus"></i>
					</el-upload>
				</el-form-item>
			</el-form>

			<div class="op-container">
				<el-button @click="Cancel" native-type="reset">取消 / 清空</el-button>
				<el-button type="primary" @click="Publish('quan')">创建</el-button>
			</div>
		</el-card>


		<el-card class="box-card" style="margin-top: 15px;">
			<h3>主图列表</h3>
			<myTable :tabelHeader="tableHeader" :tableData="table" @tableCellClick="onMoudelMsg"></myTable>
		</el-card>


		<el-dialog title="删除提示" :visible.sync="dialogVisible" width="30%">
			<span>确定要删除吗？</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxiao">取 消</el-button>
				<!-- dialogVisible = false -->
				<el-button type="primary" @click="queding">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<style>
</style>

<script>
	// import {
	// 	createType,
	// 	queryByType,
	// 	createQuan
	// }
	import myTable from '../../table';
	import request from '../../../utils/request.js'
	import {
		createType,
		queryByType,
		createImage,
        createImg,
        queryByImg,
        deleteImg
	} from '../../../api/index';
	export default {
		name: 'imgList',
		components: {
			myTable
		},
		data() {
			return {
				// 图片
				actions:'',
				// dialogImageUrl: '',
				fileList: [],
				dialogVisible: false,
                id: '',
				//表头数据
				tableHeader: [{
						type: 'text',
						value: 'id',
						key: 'id'
					},
					{
						type: 'text',
						value: '链接',
						key: 'url'
					},
					{
						type: 'image',
						value: '图片',
						key: 'img',
						iconSize:'40px',
					},
                    {
                        type: 'button',
                        value: '操作',
                        btnLis: [
                            {
                                name: '删除',
                                judeKey: 'primary',
                                judeValue: 'primary',
                                type: 'warning',
                            }
                        ]
                    }
				],
				//表格数据
				table: [],
				quan: {
					url:''
				},
				rules: {
				}
			};
		},
		computed: {
			headers() {
				return {};
			}
		},
		created() {
			this.queryByType()
			this.getUrl()
		},

		methods: {
			getUrl(){
				var one = request.defaults.baseURL
				var two = '/auth/createImage'
				var url = one+two
				this.actions = url
				// console.log(url)
			},
			//图片
			handOnSuccess(response, file, fileList) {
				this.fileList = fileList
				var file = file.raw
				this.quan.img = response.data.url
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				// this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			//获取券字典
			queryByType() {
				queryByImg()
					.then(res => {
						console.log(res);
                        res.forEach((item, index) => {
                            item.primary = 'primary' //按钮默认显示
                        })
                        this.table = res;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 取消创建
			Cancel: function() {
				this.quan.img = ''
				this.quan.url = ''
				this.fileList.length = 0
				this.$refs.upload.clearFiles()
				console.log(this.quan)
			},
			//   创建该券
			Publish: function(formName) {
				const quan = this.quan;
				var postObj = {
                    img:quan.img,
					url:quan.url
				}
				console.log(postObj)
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!!quan.img) {
							createImg(postObj.url,postObj.img)
								.then(response => {
									console.log(response);
									if (response == 1) {
										this.$notify.success({
											title: '成功',
											message: '创建成功'
										});
										this.Cancel()
										this.queryByType()
									} else {
										var errmsg = response.errmsg;
										this.$notify.error({
											title: '失败',
											message: "系统错误"
										});
									}
								})
								.catch(response => {
									console.log(response);
								});
						} else {
							this.$notify.error({
								title: '失败',
								message: '图片必传!'
							});
						}

					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
            //表格回调
            onMoudelMsg(item) {
                var data = item.data
                if (item.type == 'warning') {
                    console.log('点击删除')
                    this.id = data.id
                    this.dialogVisible = true
                }
            },
            // 取消删除
            quxiao() {
                this.dialogVisible = false
                this.id = ''
            },
            // 确定删除
            queding() {
                var postObj = {
                    id: this.id,
                }
                this.deleteIt(postObj)
            },
            // 删除方法
            deleteIt(postObj) {
                deleteImg(postObj)
                    .then(res => {
                        this.queryByType()
                        this.dialogVisible = false
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },

		}
	};
</script>